<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Valid XForm - Xui Demo</title>
	<!-- demo data -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xform -->
	<script type="text/javascript">
		$(function(){
			/**
			 * 【check】表单验证参数说明
			 * label:验证未通过提示消息的前缀(可选)
			 * name:需要验证的字段(必填)
			 * check:验证的类型(必填)
			 *
			 *		null 		非空验证
			 *		email 		电子邮件验证
			 *		phone 		手机验证
			 *		phoneline 	座机验证
			 *		phoneall 	手机+座机验证
			 *		url 		url验证
			 *		max_10 		最多可以输入 10 个字符
			 *		min_3		最少要输入 3 个字符
			 *		length_3_10   有效长度为 3~10 个字符
			 *		length_8 	有效长度为 8个字符
			 *		num 		数字验证
			 *		int 		整数+0
			 *		intp 		非负整数
			 *		intb 		非正整数
			 *		float 		浮点数+0
			 *		floatp 		非负浮点数
			 *		floatb 		非正浮点数
			 *		maxnum_100	请输入不大于 100 的数值
			 *		minnum_10	请输入不小于10 的数值
			 */
			var xform = $("#xform").xform({
				url:"http://localhost:8080/xsoft/upload",		//服务器接口地址
				checkall:true,									//验证全部默认false
				check:[
					{label:"昵称", name:'name', check:'null,length_3_10'},	
					{label:"电子邮件",name:'email', check:'null,email'},
					{label:"手机",name:'phone', check:'null,phone'},
					{label:"网址",name:'url', check:'null,url'},
					{label:"年龄",name:'age', check:'null,intp'}
				],
				success:function(data){							//成功回调
					$(".xinfo").html(data);
				}
			});
			
			$("#submit").click(function(){
				xform.submit();
			});
		})
	</script>
</head>
<body>
	<h2>Valid XForm</h2>
	<form class="xform" id="xform">
		<div class="xgroup">
			<label class="g1">昵称</label>
			<div class="g2"><input type="text" name="name"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">电子邮件</label>
			<div class="g2"><input type="text" name="email"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">手机</label>
			<div class="g2"><input type="text" name="phone"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">网址</label>
			<div class="g2"><input type="text" name="url"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">年龄</label>
			<div class="g2"><input type="text" name="age"/></div>
		</div>
		<div class="xgroup">
			<div class="g1">&nbsp;</div>
			<div class="g2"><span class="xbtn" id="submit">提交</span></div>
		</div>
	</form>
	<div class="xinfo"></div>
</body>
</html>